<script setup lang="ts">
import type { Component } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import { PageEnum } from "@/enums/pageEnum.ts";
import WebBaseEnum from "@/enums/webBaseEnum";
import { NIcon } from "naive-ui";
import {
  Bag as RoleIcon,
  LogOutOutline as LogoutIcon,
  PersonCircleOutline as UserIcon,
} from "@vicons/ionicons5";

function renderIcon(icon: Component) {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
}
const options = [
  {
    label: "admin",
    key: "profile",
    icon: renderIcon(UserIcon),
  },
  {
    label: "管理员",
    key: "role",
    icon: renderIcon(RoleIcon),
  },
  {
    label: "退出登录",
    key: "logout",
    icon: renderIcon(LogoutIcon),
  },
];

const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const { BASE_LOGIN } = PageEnum;
const dialog = useDialog();
const message = useMessage();
function handleSelect(key: string) {
  if (key === "logout") {
    dialog.info({
      title: "提示",
      content: "您确定要退出登录吗",
      positiveText: "确定",
      negativeText: "取消",
      onPositiveClick: () => {
        userStore.logout().then(() => {
          message.success("成功退出登录");
          // 移除标签页
          // localStorage.removeItem(TABS_ROUTES);
          router.replace({
            path: BASE_LOGIN,
            query: {
              redirect: route.fullPath,
            },
          });
        });
      },
      onNegativeClick: () => {},
    });
  }
}
</script>
<template>
  <div class="mr-5">
    <n-dropdown :options="options" @select="handleSelect" class="min-w-40">
      <n-avatar round :size="40" :src="WebBaseEnum.logo" />
    </n-dropdown>
  </div>
</template>
